import React, { Component } from 'react'
import { CSSTransition } from 'react-transition-group'
import { connect } from 'react-redux'
import { actionCreator } from './store'
import { actionCreator as LoginActionCreator } from '../../pages/login/store'
import { Link } from 'react-router-dom'
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoList,
  SearchInfoItem,
  Addition,
  Button,
  SearchWrapper
} from './style'


class Header extends Component {
  
  getListArea() {
    const { focused, list, page, totalPage, mouseIn, handleMouseEnter, handleMouseLeave, handleChangePage } = this.props
    const newList = list.toJS()
    const pageList = []

    if (newList.length) {
      for(let i = (page - 1) * 10; i< page * 10; i++) {
        pageList.push(
          <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
        )
      }
    }

    if (focused || mouseIn) {
      return (
        <SearchInfo
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch onClick={() => {handleChangePage(page, totalPage, this.spinIcon)}}>
              <i ref={(icon) => this.spinIcon = icon} className="iconfont spin">&#xe857;</i>
              换一批
            </SearchInfoSwitch>
          </SearchInfoTitle>
          <SearchInfoList>
            {pageList}
          </SearchInfoList>
        </SearchInfo>
      )
    } else {
      return null
    }
  }
  render() {
    const {
      list,
      focused,
      loginStatus,
      logout,
      handleInputFocus,
      handleInputBlur
    } = this.props
    return (
      <HeaderWrapper>
      <Link to="/">
        <Logo />
      </Link>
      <Nav>
        <Link to="/"><NavItem className="left active">首页</NavItem></Link>
        <NavItem className="left">下载App</NavItem>
        {
          loginStatus ? <NavItem className="right logout" onClick={logout}>退出</NavItem> : <Link to="/login"><NavItem className="right">登录</NavItem></Link>
        }
        
        <NavItem className="right">
          <i className="iconfont">&#xe636;</i>
        </NavItem>
        <SearchWrapper>
          <CSSTransition
            in={focused}
            timeout={200}
            classNames="slide"
          >
            <NavSearch
              onFocus={() => {handleInputFocus(list)}}
              onBlur={handleInputBlur}
              className={focused ? 'focused' : ''}
            ></NavSearch>
          </CSSTransition>
          <i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe617;</i>
          {this.getListArea()}
        </SearchWrapper>
      </Nav>
      <Addition>
          <Link to='/write'>
						<Button className='writting'>
							<i className="iconfont">&#xe6dd;</i>
							写文章
						</Button>
					</Link>
        <Button className="reg">注册</Button>
      </Addition>
    </HeaderWrapper>
    )
  }
  
}



const mapStateToProps = (state) => {
  return {
    focused: state.getIn(['header', 'focused']),
    list: state.getIn(['header', 'list']),
    mouseIn: state.getIn(['header', 'mouseIn']),
    page: state.getIn(['header', 'page']),
    totalPage: state.getIn(['header', 'totalPage']),
    loginStatus: state.getIn(['login', 'login'])
  }
}
const mapDespatchToProps = (dispatch) => {
  return {
    handleInputFocus(list) {
      (list.size === 0) && dispatch(actionCreator.getList())
      dispatch(actionCreator.searchFocusAction())
    },
    handleInputBlur() {
      dispatch(actionCreator.searchBlurAction())
    },
    handleMouseEnter() {
      dispatch(actionCreator.mouseEnterAction())
    },
    handleMouseLeave() {
      dispatch(actionCreator.mouseLeaveAction())
    },
    handleChangePage(page, totalPage, spin) {
      let originAngle = spin.style.transform.replace(/[^0-9]/ig, '')
      if (originAngle) {
        originAngle = parseInt(originAngle, 10)
      } else {
        originAngle = 0
      }
      spin.style.transform = `rotate(${ originAngle + 360 }deg)`

      dispatch(actionCreator.changePageAction(page < totalPage ? page + 1 : 1))
    },
    logout() {
      dispatch(LoginActionCreator.logout())
    }
  }
}

export default connect(mapStateToProps, mapDespatchToProps)(Header)